<ion-header>

  <ion-navbar color="dark">
    <ion-title text-center="" class="w80">运动详情</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
  <img style="width:100%;height:240px" src="{{sportBgImgPath}}{{sportModel.pubSportImg}}">
  <div class="main1">

    <img src="{{localSportTypeImgPath}}{{sportModel.sportTypeImg}}" class="sport_type_img">
    <div class="sport_title">{{sportModel.pubSportTitle}}</div>
  </div>

  <div class="condition">
    <img src="{{localSportTypeImgPath}}starttime.jpg" class="type_img">
    <span>{{sportModel.sportStartDatetime}}({{sportModel.sportStartWeek}})</span>
  </div>
  <!--结束时间-->
  <div class="condition">
    <img src="{{localSportTypeImgPath}}endtime.jpg" class="type_img">
    <span>{{sportModel.sportEndDatetime}}({{sportModel.sportEndWeek}})</span>
  </div>
  <!--地点-->
  <div class="condition">
    <img src="{{localSportTypeImgPath}}location.png" class="type_img">
    <span>{{sportModel.pubSportPlace}}</span>
  </div>

  <ion-list>
    <ion-item>
      <ion-grid>
        <ion-row>
          <ion-col text-center="" style="border-right:1px silver solid">
            <p *ngIf="sportModel.sportAllowJoinPersonNum!=null" style="color: black">
              {{sportModel.sportAllowJoinPersonNum}}</p>
            <p *ngIf="sportModel.sportAllowJoinPersonNum==null" style="color: black;font-size: 12px">无限制</p>
            <p>人数</p>
          </ion-col>
          <ion-col text-center="" style="border-right:1px silver solid" (click)="JoinSportPersonList()">
            <p style="color: black">{{sportModel.sportRealJoinPersonNum}}</p>
            <p>已参加</p>
          </ion-col>
          <ion-col text-center="">
            <p style="color: black">{{sportModel.browseNum}}</p>
            <p>浏览</p>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <ion-item>
      <label>活动描述</label>
      <p *ngIf="sportModel.pubSportDes!=null">{{sportModel.pubSportDes}}</p>
      <p *ngIf="sportModel.pubSportDes==null">暂无描述</p>
    </ion-item>
    <ion-item>
      <ion-avatar item-start>
        <img src="{{userFacePath}}/{{sportModel.userFace}}"/>
      </ion-avatar>
      <ion-label style="width: 30px">{{sportModel.nickName}}
        <ion-icon *ngIf="sportModel.sex==1" ios="ios-female" md="md-female" class="female"></ion-icon>
        <ion-icon *ngIf="sportModel.sex==0" ios="ios-male" md="md-male" class="male"></ion-icon>
      </ion-label>

      <ion-note item-right="">
        <a *ngIf="sportModel.phone!==null &&sportModel.phone!==''" href="tel:{{sportModel.phone}}">
          <ion-icon name="call" item-right="" style="color: green"></ion-icon>
        </a>
        <p *ngIf="sportModel.phone===null ||sportModel.phone===''">暂无联系电话</p>
      </ion-note>
    </ion-item>


  </ion-list>

</ion-content>


<ion-footer>
  <ion-buttons>
    <button *ngIf="sportModel.pubSportStatus==0&&sportModel.sportFlag==2" ion-button="" class="btn_join" (click)="joinSport()">我要参加</button>
    <button *ngIf="sportModel.pubSportStatus==0&&sportModel.sportFlag==3" ion-button="" (click)="cancelJoinSport()">取消参加活动</button>
    <button *ngIf="sportModel.pubSportStatus==0&&sportModel.sportFlag==4" ion-button="" (click)="cancelSport()" color="danger">取消活动</button>
    <button disabled *ngIf="sportModel.pubSportStatus==0&&sportModel.sportFlag==1" ion-button="" class="btn_disable">人数已满</button>
    <button disabled *ngIf="sportModel.pubSportStatus==0&&sportModel.sportFlag==0" ion-button="" class="btn_disable">活动已结束</button>
    <button disabled *ngIf="sportModel.pubSportStatus==1" ion-button="" class="btn_disable">活动已取消</button>

    <button ion-button="" class="btn_talk">讨论</button>
  </ion-buttons>
</ion-footer>
